<template>
    <div>
        <van-collapse v-model="companyId" accordion @change="changeCompany">
            <van-collapse-item size ="large" title-class="titleSty" v-for="company in companyList" :key="company.id" :title="company.name" :name="company.id" @click.native="changeCompany($event)">
                <template #icon>
                    <van-image
                            width="3rem"
                            height="3rem"
                            fit="cover"
                            :src="company.logo"
                    />
                </template>
                <div>
                    <van-list
                            v-model="loading"
                            :immediate-check="immediate"
                            :finished="finished"
                            finished-text="没有更多了"
                            @load="onLoad">
                        <van-cell v-for="salesman in salesmanList" :key="salesman.id" :title="salesman.name" :value="salesman.motto"  size="large" @click="showSalesmanInfo(salesman)">
                            <!-- 使用 title 插槽来自定义标题 -->
                            <template #label>
                                <van-rate v-model="salesman.level"
                                          :size="15"
                                          color="#ff6666"
                                          icon="like"
                                          void-icon="like-o"
                                          void-color="#eee" readonly/>
                            </template>
                            <template #icon>
                                <van-image
                                        round
                                        fit="cover"
                                        width="4rem"
                                        height="4rem"
                                        :src="salesman.avatar"
                                ></van-image>
                            </template>
                        </van-cell>
                    </van-list>
                </div>
            </van-collapse-item>
        </van-collapse>
    </div>
</template>
<script>
    import Vue from 'vue';
    import axios from 'axios';
    import { Collapse, CollapseItem, List, Cell, CellGroup, Rate, Image as VanImage } from 'vant';
    Vue.use(Collapse);
    Vue.use(CollapseItem);
    Vue.use(List);
    Vue.use(Cell);
    Vue.use(CellGroup);
    Vue.use(Rate);
    Vue.use(VanImage);
    export default {
        name: "list",
        components: List,
        data() {
            return {
                companyId : '',
                companySalesmanNum : '',
                list: [],
                pageSize: 20,
                loadIndex: 1,
                companyList: [],
                salesmanList: [],
                loading: false,
                finished: false,
                immediate:true
            };
        },
        created() {
            var _this = this;
            axios.post('metadata/data/doSqlFormatDatas?token=da38811ef3919d5e90323333c982c62a', {
                app_id: '5f840b5311cf801f6267ef6f',
                sql_code: 'getCompanyAndSalesmanNum'
            }).then(function (response) {
                // window.console.log(response);
                _this.companyList = []
                let datas = response['data'];
                for (const data of datas) {
                    var company = {"id":data.id,"name":data.name,"logo":data.logo,"num":data.num,"salesmanList": [] , "loadIndex":1}
                    _this.companyList.push(company);
                }
            });
        },
        methods: {
            changeCompany(num) {
                if(typeof num === "string"){ //点开某个公司
                    // window.console.log(this.companyList);
                    this.companyId = num;
                    for(let company of this.companyList){
                        if(company.id === num){
                            this.salesmanList = company.salesmanList;
                            this.companySalesmanNum = company.num;
                            this.loadIndex = company.loadIndex;
                            this.finished = false;
                        }
                    }
                }
            },

            //滚动到底部时调用onLoad，并且loading自动置为ture，当前批次查完后loading置为false，全部查完时finished置为true
            onLoad :async function() {
                if ((this.pageSize * (this.loadIndex-1)) <= Number(this.companySalesmanNum)) {
                    await this.getSalesmanListByCompany();
                }
                this.loading = false;
                if ((this.pageSize * this.loadIndex) >= Number(this.companySalesmanNum)) {
                    this.finished = true;
                }
            },


            getSalesmanListByCompany :async function(){
                var this_ = this;
                await axios.post('metadata/data/queryData?token=da38811ef3919d5e90323333c982c62a', {
                    app_id: '5f840b5311cf801f6267ef6f',
                    obj_id: '5f840c2411cf801f6267ef77',
                    page_index: this.loadIndex++,
                    page_size: this.pageSize,
                    params: { 'company':this.companyId}
                }).then(function (response) {
                    var result = response['data']['result']['datas'];
                    if(result && result.length>0)
                       this_.addSalesman(result)
                });
                for(let company of this.companyList){
                    if(company.id === this.companyId){
                        company['salesmanList'] = this.salesmanList
                        company['loadIndex'] = this.loadIndex;
                    }
                }
            },

            addSalesman(datas){
                for (const data of datas) {
                    var level = data.level.value
                    var year = data.year.value ? Number(data.year.value):0
                    if(!level){
                        if(year){
                            if(year<=1){
                                level = 1
                            }else if(year<=2){
                                level = 2
                            }else if(year<=3){
                                level = 3
                            }else if(year<=6){
                                level = 4
                            }else{
                                level = 5
                            }
                        }
                    }
                    var salesman = {
                        "avatar":data.avatar.value,
                        "show":data.show.value,
                        "name":data.name.value,
                        "motto":data.motto.value,
                        "level":Number(level),
                        "company":data.company.value,
                        "work_id":data.work_id.value,
                        "phone":data.phone.value,
                        "email":data.email.value,
                        "customer_num":data.customer_num.value,
                        "customer_payment":data.customer_payment.value,
                        "insurance_num":data.insurance_num.value,
                        "sum_money":data.sum_money.value,
                        "privilege_service":data.privilege_service.value,
                        "service_range":data.service_range.value,
                        "year":data.year.value,
                    }
                    this.salesmanList.push(salesman);
                }
            },
            showSalesmanInfo(salesman){
                // window.console.log(salesman);
                this.$router.push({name:'salesman',params:{salesman:salesman}});
            },
        },
    };
</script>

<style lang="less">
    .list {
        &-insure {
            width: 100%;
            display: block;
        }

        &-group {
            margin-bottom: 15px;
        }

        &-links {
            padding: 15px 0;
            font-size: 12px;
            text-align: center;
            background-color: #fff;

            .van-icon {
                display: block;
                font-size: 24px;
            }
        }
    }
    .custom-title {
        margin-right: 4px;
        vertical-align: middle;
    }
    .titleSty{
        line-height: 4rem;
        margin-left: 5px;
    }
</style>
